<template>
  <div class="home">
    <!-- 主图轮播 -->
    <div class="swiper-container">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="https://kaola-haitao.oss.kaolacdn.com/b1c8e942-e49c-4b61-ae0a-6be4d94856abT2012281548_960_575.jpg?x-oss-process=image/resize,w_750,h_0/quality,q_95/format,webp/ignore-error,1" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://kaola-haitao.oss.kaolacdn.com/0d82e395-3f2e-46e0-a295-da4a1cb6cf00T2012311437_960_575.jpg?x-oss-process=image/resize,w_750,h_0/quality,q_95/format,webp/ignore-error,1" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://kaola-haitao.oss.kaolacdn.com/46ceff49-0d0b-4495-b168-c249c4b950bfT2012311428_960_575.jpg?x-oss-process=image/resize,w_750,h_0/quality,q_95/format,webp/ignore-error,1" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://kaola-haitao.oss.kaolacdn.com/53879741-010e-4e47-a1eb-bd208ba565ceT2012310958_960_575.jpg?x-oss-process=image/resize,w_750,h_0/quality,q_95/format,webp/ignore-error,1" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://kaola-haitao.oss.kaolacdn.com/cf5e9ca4-0d35-49f6-a50a-67fa7c42720cT2012302154_960_575.jpg?x-oss-process=image/resize,w_750,h_0/quality,q_95/format,webp/ignore-error,1" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://kaola-haitao.oss.kaolacdn.com/9cb044ac-e46d-4bb8-bad0-ea79015d1506T2012311437_960_575.jpg?x-oss-process=image/resize,w_750,h_0/quality,q_95/format,webp/ignore-error,1" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 主页分类 -->
    <ul class="home-category">
      <li
      v-for="category in mainCategory"
      :key="category.id"
      >
        <i>
          <img :src="category.img" alt="">
        </i>
        <span>{{ category.title }}</span>
      </li>
    </ul>

    <van-divider
      :style="{ color: '#000', fontSize: '16px', fontWeight: 'bold' }"
    >
      小编精选，全场特惠
    </van-divider>

    <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    class="list"
  >
    <div
    v-for="item in list"
    :key="item.id"
    is='router-link'
    :to="{ name: 'SpecDetails', params: {id:item.id}}"
    tag="div"
    >
      <template v-if="item.type === 1">
        <img v-lazy="item.image"/>
         <article>
          <p>{{ item.title }}</p>
          <h2>
            <span>淘宝</span>
            <b>包邮</b>
          </h2>
          <h3>
            <span>
              ￥<i>{{ item.price }}</i>
            </span>
            <strong>
              {{ item.saleNum | saleNum}}
              <template v-if="item.saleNum >= 10000">万</template>人已买
            </strong>
            <b>{{ item.couponValue }}</b>
          </h3>
        </article>
      </template>
      <template v-else>
        <img v-lazy="item.image" class="isBig" />
      </template>
    </div>
  </van-list>
  </div>
</template>

<script>
import { getList } from '@/api/home'
export default {
  name: 'Home',
  data () {
    return {
      mainPhoto: [],
      mainCategory: [],
      list: [],
      loading: false,
      finished: false,
      page: 1
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      // List 组件通过loading和finished两个变量控制加载状态，
      // 当组件滚动到底部时，会触发load事件并将loading设置成true。
      // 此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false即可。
      // 若数据已全部加载完毕，则直接将finished设置成true即可
      getList(this.page).then(res => {
        this.list = this.list.concat(res)
        this.page += 1
        this.loading = false
        if (res.length === 0) {
          this.finished = true
        }
      })
    }
  }
//   created () {
//     getBanners()
//       .then(res => {
//         this.mainPhoto = res.mainPhoto
//         this.mainCategory = res.homeCategory
//       })
//   }
}
</script>

<style lang="scss" scoped>
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 150px;
    text-align: center;
    background-color: #39a9ed;
    img{
      height: 150px;
      width: 100%;
    }
  }
.home{
  background: #fafafa;
}
.home-category{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  padding: 5px 0;
  background: #fff;
  li{
    width: 75px;
    height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 8px;
    i{
      width:60px;
      height: 60px;
      background: #f2f2f2;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 50%;
        height: 50%;
      }
    }
    span{
      font-size: 14px;/* no */
      color: #4e4e4e;
    }
  }
}
.list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  div{
    width:49%;
    height: 280px;
    display: flex;
    flex-direction: column;
    background:#fff;
    margin-bottom: 8px;
    img{
      width: 100%;
      height: 66%;
    }
    article{
      margin-top: 8px;
      padding: 0 7px;
      p{
        font-size: 15px;/*no */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      h2{
        margin:6px 0 6px;
        display: flex;
        justify-content: space-between;
        font-size: 13px;/*no */
        span{
          width: 30px;
          height: 20px;
          background: #ff3838;
          line-height: 20px;
          text-align: center;
          color: #fff;
        }
        b{
          line-height: 20px;
        }
      }
      h3{
        height: 48px;
        display: flex;
        padding-bottom: 15px;/*no */
        justify-content: space-between;
        span{
          font-size: 12px;/*no */
          color: #ff3838;
          i{
            font-size: 20px;/*no */
          }
        }
        strong{
          font-size: 12px;/*no */
          align-self: flex-end;
          color: rgb(121, 121, 121);
        }
        b{
          font-size: 10px;/*no */
          padding: 0 2px;
          height: 18px;
          border: 1px solid #ff5151;/*no */
          color: #ff5151;
          line-height: 18px;
          text-align: center;
          align-self: flex-end;
        }
      }
    }
  }
}
.isBig{
  height: 100%!important;
}
</style>
